<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            float: left;
            width: 200px;
            height: 500px;
            border-right: 1px solid #666;
        }
        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <v-top></v-top>
        <v-content></v-content>
        <!-- <v-form v-show=""></v-form> -->
    </div>
    <template id="v-top">
        <div>
            <img src="" alt="pic">
            <a href="./02component.html">02component</a>
            <a href="./02component.html">02component</a>
            <a href="./02component.html">02component</a>
        </div>
    </template>
    <template id="v-content">
        <div>
            <v-left class="left"></v-left>
            <v-right class="right"></v-right>
        </div>
    </template>
    <template id="v-left">
        <div>
            <ul>
                <li v-for="(item,index) in list" :key="item">
                    <a :href="item">第{{index + 1}}个</a>
                </li>
            </ul>
        </div>
    </template>
    <template id="v-right">
        <div>
            content
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                vTop: {
                    template: '#v-top'
                },
                vContent: {
                    template: '#v-content',
                    components: {
                        vLeft: {
                            template: '#v-left',
                            data() {
                                return {
                                    list: [
                                        '../day04/01axios.html',
                                        '../day04/02生命周期.html',
                                        '../day04/03过滤器.html',
                                        '../day04/作业.html',
                                    ]
                                }
                            }
                        },
                        vRight: {
                            template: '#v-right'
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>